<template>
	<div class="password">
		<el-input
			v-model="password"
			:maxlength="maxlength"
			:placeholder="placeholder"
			clearable
			class="name"
			type="password"
			show-password
			:class="{ 'passwordIf-input': passwordIf }"
		></el-input>
		<div class="password-progress">
			<div
				class="progress-item"
				:class="{
					active: complexity >= item,
					danger: complexity < 2,
					warning: complexity >= 2 && complexity < 4,
					success: complexity >= 4,
				}"
				v-for="item in 5"
				:key="item"
			></div>
		</div>
		<div class="tip">密码需包含至少8位包含大写字母、小写字母、数字、特殊字符的组合字符串</div>
	</div>
</template>

<script setup>
const props = defineProps({
	modelValue: {
		type: [String, Number],
		default: "",
	},
	placeholder: {
		type: String,
		default: "请输入密码",
	},
	maxlength: {
		type: [Number, String],
		default: 20,
	},
	passwordIf: {
		type: Boolean,
		default: false,
	},
})

const emit = defineEmits(["update:modelValue"])

const password = computed({
	get: () => {
		return props.modelValue
	},
	set: val => {
		emit("update:modelValue", val)
	},
})

const complexity = computed(() => {
	let complexity = 0
	if (!password.value.length) {
		return complexity
	}
	if (password.value.match(/[a-z]/)) {
		complexity++
	}
	if (password.value.match(/[A-Z]/)) {
		complexity++
	}
	if (password.value.match(/[0-9]/)) {
		complexity++
	}
	if (password.value.match(/[^a-zA-Z0-9]/)) {
		complexity++
	}
	if (password.value.length > 8 && !password.value.match(/([a-zA-Z0-9])\1{8,16}/)) {
		complexity++
	}

	return complexity
})
</script>

<style lang="scss" scoped>
@import "/style/basis";
.password-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	height: 32px;
	.progress-item {
		width: 20%;
		height: 7px;
		background-color: #c8c9cb;
		border-radius: 2px;
		position: relative;
		color: #c8c9cb;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			border-radius: 2px;
			transition: width 0.3s;
			background: currentColor;
		}
		&.active {
			&::before {
				width: 100%;
			}
			&.danger {
				color: #ff4949;
			}
			&.warning {
				color: #ff9c00;
			}
			&.success {
				color: #95de64;
			}
		}
	}
}
.name {
	width: 400px;
	@include maxWidth(600) {
		width: 100%;
	}
}
.passwordIf-input {
	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 1px #f56c6c inset !important;
	}
}
.tip {
	font-size: 12px;
	color: #808080;
	margin-top: 5px;
}
</style>
